import React, { lazy } from 'react';
import { RouteObject, Navigate } from 'react-router-dom';

const Home = lazy(() => import('@/views/home'));
const Discover = lazy(() => import('@/views/discover'));
const Login = lazy(() => import('@/views/login'));
const MusicLibrary = lazy(() => import('@/views/musicLibrary'));
const More = lazy(() => import("@/views/more"))
const DiscoverPage = lazy(() => import("@/views/discoverPage"))
const PlayList = lazy(() => import("@/views/playlist"))
const Account = lazy(() => import("@/views/account"))
const UserName = lazy(() => import("@/views/username"))
const Album = lazy(() => import("@/views/album"))
const LinkeSongs = lazy(() => import("@/views/linkesongs"))
const Artist = lazy(() => import("@/views/artist"))
const Mv = lazy(() => import("@/views/mv"))

const routes: RouteObject[] = [
  {
    path: '/',
    element: <Navigate to="/home" />,
  },
  {
    path: '/home',
    element: <Home />,
  },
  {
    path: '/discover',
    element: <Discover />,

    children: [
      {
        path: '/discover',
        element: <Navigate to="/discover/全部" state={{ index: 0 }} />
      },
      {
        path: '/discover/:discText',
        element: <DiscoverPage />
      }
    ]
  },
  {
    path: '/login',
    element: <Login />,
  },
  {
    path: "/login/account",
    element: <Account />
  },
  {
    path: '/login/username',
    element: <UserName />
  },
  {
    path: "/playlist/:menuId",
    element: <PlayList />
  },
  {
    path: '/musiclibrary',
    element: < MusicLibrary />,
  },
  {
    path: '/musiclibrary/linkesongs',
    element: <LinkeSongs />,
  },
  {
    path: '/more/:title',
    element: <More />
  },
  {
    path: '/artist/:artistId',
    element: <Artist />
  },
  {
    path: '/album/:albumId',
    element: <Album />
  },
  {
    path: '/mv/:mvId',
    element: <Mv />
  }
];

export default routes;
